import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mziot/app/config/design.dart';
import 'package:mziot/app/modules/auth/profile/views/auth_profile_view.dart';
import 'package:mziot/app/modules/circle/views/circle_view.dart';
import 'package:mziot/app/modules/home/views/home_view.dart';
import 'package:mziot/app/modules/scene/views/scene_view.dart';
import 'package:mziot/generated/assets.dart';
import 'package:mziot/generated/locales.g.dart';

import '../controllers/tabbar_controller.dart';

class TabbarView extends GetView<TabbarController> {
  final _bodyList = [HomeView(), SceneView(), CircleView(), AuthProfileView()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(() => _bodyList[controller.index.value]),
      extendBody: true,
      bottomNavigationBar: Obx(() {
        final index = controller.index.value;

        return Stack(
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: 2,
                  color: Colors.white,
                ),
                BottomNavigationBar(
                  backgroundColor: Colors.white,
                  selectedItemColor: MColor.xFF25C56F,
                  unselectedItemColor: MColor.xFF999999,
                  selectedLabelStyle: MFont.semi_Bold13,
                  unselectedLabelStyle: MFont.semi_Bold13,
                  type: BottomNavigationBarType.fixed,
                  currentIndex: index,
                  elevation: 0,
                  onTap: (index) {
                    controller.index.value = index;
                  },
                  items: [
                    BottomNavigationBarItem(
                      icon: Container(
                        margin: EdgeInsets.all(3),
                        child: Image.asset(
                          index == 0 ? Assets.imagesDeviceSelected : Assets.imagesDeviceNomarl,
                          width: 24,
                          height: 24,
                          color: index == 0 ? MColor.xFF25C56F : MColor.xFF999999,
                        ),
                      ),
                      label: LocaleKeys.tab_devices.tr,
                    ),
                    BottomNavigationBarItem(
                      icon: Container(
                        margin: EdgeInsets.all(3),
                        child: Image.asset(
                          index == 1 ? Assets.imagesSceneSelected : Assets.imagesSceneNomarl,
                          width: 24,
                          height: 24,
                          color: index == 1 ? MColor.xFF25C56F : MColor.xFF999999,
                        ),
                      ),
                      label: LocaleKeys.tab_scene.tr,
                    ),
                    BottomNavigationBarItem(
                      icon: Container(
                        margin: EdgeInsets.all(3),
                        child: Image.asset(
                          index == 2 ? Assets.imagesCircleSelected : Assets.imagesCircleNomarl,
                          width: 24,
                          height: 24,
                          color: index == 2 ? MColor.xFF25C56F : MColor.xFF999999,
                        ),
                      ),
                      label: LocaleKeys.tab_community.tr,
                    ),
                    BottomNavigationBarItem(
                      icon: Container(
                        margin: EdgeInsets.all(3),
                        child: Image.asset(
                          index == 3 ? Assets.imagesMineSelected : Assets.imagesMineNomarl,
                          width: 24,
                          height: 24,
                          color: index == 3 ? MColor.xFF25C56F : MColor.xFF666666,
                        ),
                      ),
                      label: LocaleKeys.tab_mine.tr,
                    ),
                  ],
                ),
              ],
            ),
            Container(
              color: MColor.skin,
              height: 2,
              width: Get.width / 4,
              margin: EdgeInsets.only(left: Get.width / 4 * index),
            ),
          ],
        );
      }),
    );
  }
}
